<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="account pages font-B ">
      <nav-bar title='重置密码' titleColor='#333'></nav-bar>
      <view class="account-input margin-t20">
        <input class="account-input-inner c-333 font-B font-17" v-model="pass" password placeholder="设置新密码" />
        <!-- <view class="account-input-del jh-flex-center">
          <image style="width: 20px;height: 20px;display: block;" :src="ossDomain + '/icon-close.png'"></image>
        </view> -->
      </view>
      <view class="account-input">
        <input class="account-input-inner c-333 font-B font-17" v-model="rePass" password placeholder="再次输入新密码" />
        <!-- <view class="account-input-del jh-flex-center">
          <image style="width: 20px;height: 20px;display: block;" :src="ossDomain + '/icon-close.png'"></image>
        </view> -->
      </view>
      <view class="account-input code jh-flex">
        <input class="account-input-inner c-333 font-B font-17" v-model="code" type="number" maxlength="4" placeholder="输入验证码" />
        <view class="code-btn jh-flex-center" @tap="send">
          {{sendAuthCode ? '获取验证码' : count}}
        </view>
        <!-- <view class="account-input-del jh-flex-center">
          <image style="width: 20px;height: 20px;display: block;" :src="ossDomain + '/icon-close.png'"></image>
        </view> -->
      </view>
      <view class="account-btn c-fff font-17 jh-flex-center" @tap='setForgetpwd'>
        确定
      </view>
    </view>
    <backBtn></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {
      backBtn
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        sendAuthCode: true,
        count: "",
        code: '',
        pass: '',
        rePass: '',
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
      }),
    },
    methods: {
      send() {
        if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.userInfo.user.mobile)) {
          uni.showToast({
            title: "请输入正确的手机号码"
          })
          return;
        }
        if (!this.sendAuthCode) return;
        uni.showLoading({
          title: '验证码发送中',
          mask: true
        })
        let obj = {
          mobile: this.userInfo.user.mobile
        }
        this.$http.send(obj).then(res => {
          uni.hideLoading()
          this.getCode()
        })
      },
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.sendAuthCode = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.sendAuthCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      setForgetpwd () {
        if (!this.code) {
          uni.showToast({
            title: "请输入验证码",
            icon: 'none'
          })
          return;
        }
        if (!this.pass) {
          uni.showToast({
            title: "请输入新密码",
            icon: 'none'
          })
          return;
        }
        if (this.pass !== this.rePass) {
          uni.showToast({
            title: "两次密码不一致",
            icon: 'none'
          })
          return;
        }
        let obj = {
          mobile: this.userInfo.user.mobile,
          code: this.code,
          confirm_pwd: this.rePass,
          pwd: this.pass
        }
        uni.showLoading({
          mask: true
        })
        this.$http.setForgetpwd(obj).then(res => {
          uni.showToast({
            title: '重置成功',
            mask: true
          })
          setTimeout(() => {
            uni.navigateBack()
          },2000)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages {
    width: 100%;
    height: 100vh;
    padding: 0 30px;
    box-sizing: border-box;
  }

  .account {
    &-input {
      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      background-color: #fff;
      padding: 0 30px;
      box-sizing: border-box;
      position: relative;
      margin-bottom: 7px;

      &-inner {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
      }

      &.code {
        padding-right: 0;

        .account-input-inner {
          width: calc(100% - 230px);
        }

        .code-btn {
          width: 230px;
          height: 100%;
          background-color: #008399;
          color: #fff;
        }
      }

      &-del {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 15px;
      }
    }

    &-btn {
      height: 50px;
      background-color: #008399;
      margin-top: 40px;
    }
  }
</style>
